<template>
  <el-row class="ClientBox">
    <el-row class="ClientBg">
      <el-row class="ClientContent">
        <h3 class="ClientTitle">报价设置 <span class="icon">></span></h3>
      </el-row>
      <el-row>
        <el-tabs type="border-card">
          <el-tab-pane label="部门设置">
            <el-table :data="departmentTableData" border style="width: 100%" class="priceTable">
              <el-table-column fixed prop="order" label="部门名称" width="150"></el-table-column>
              <el-table-column fixed prop="order" label="部门经理" width="150"></el-table-column>
              <el-table-column fixed="right" label="操作">
                  <template slot-scope="scope">
                    <el-button type="text" size="small">编辑</el-button>
                    <el-button type="text" size="small">添加下级部门</el-button>
                  </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="职位设置">
            <el-row class="setPosition">
              <el-col :span="5"  class="keyWordsContent">
                <el-input v-model="keyWords" size="small" placeholder="搜索关键字" id="keyWords"></el-input>
                <span class="el-icon-search searchIcon"></span>
              </el-col>
              <el-col :span="3" :offset="16" class="addNewItem">
                <el-button size="mini" type="primary">添加职位</el-button>
              </el-col>
            </el-row>
            <el-table :data="clientTableData" border style="width: 100%" class="priceTable">
              <el-table-column fixed prop="order" label="职位名称" width="150"></el-table-column>
              <el-table-column prop="userName" label="职位权重" width="120"></el-table-column>
              <el-table-column prop="userPhone" label="职位权限" width="300"></el-table-column>
              <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                  <el-button type="text">编辑</el-button>
                  <el-button type="text">权限编辑</el-button>
                  <el-button type="text">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="员工设置">
              <el-row class="setPosition">
                <el-form ref="form" :model="organizationForm" label-width="50px">
                  <el-form-item label="部门:">
                    <el-col :span="15" class="keyWordsContent">
                      <el-row>
                        <el-col :span="6">
                          <el-select v-model="organizationForm.department" placeholder="请选择部门">
                            <el-option label="研发部" value="1"></el-option>
                          </el-select>
                        </el-col>
                        <el-col :span="10" :offset="1 ">
                          <el-input v-model="organizationForm.keyWords" placeholder="搜索关键字" id="keyWords"></el-input>
                          <span class="el-icon-search searchWorker"></span>
                        </el-col>
                      </el-row>
                    </el-col>
                    <el-col :span="5" :offset="4" class="addNewItem">
                      <el-button size="mini" type="primary">添加员工</el-button>
                      <el-button size="mini" type="primary">批量导入</el-button>
                    </el-col>
                  </el-form-item>
                </el-form>
              </el-row>
            <el-table :data="clientTableData" border style="width: 100%" class="priceTable">
              <el-table-column fixed prop="order" label="姓名" width="100"></el-table-column>
              <el-table-column prop="userName" label="性别" width="100"></el-table-column>
              <el-table-column prop="userPhone" label="部门名称" width="100"></el-table-column>
              <el-table-column prop="userLayout" label="职位" width="120"></el-table-column>
              <el-table-column prop="userArea" label="联系电话" width="100"></el-table-column>
              <el-table-column prop="userProcessAddress" label="是否禁用" width="150"></el-table-column>
              <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                  <el-button type="text">编辑</el-button>
                  <el-button type="text">重置密码</el-button>
                  <el-button type="text">账号停用</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="等级设置">
              <el-row class="setPosition">
               <el-button size="small" type="primary">新增等级</el-button>
              </el-row>
              <el-table :data="clientTableData" border style="width: 100%" class="priceTable">
                  <el-table-column fixed prop="order" label=" 等级" width="300"></el-table-column>
                  <el-table-column fixed="right" label="操作">
                      <template slot-scope="scope">
                          <el-button type="text">编辑</el-button>
                          <el-button type="text">删除</el-button>
                      </template>
                  </el-table-column>
              </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-row>
    </el-row>
  </el-row>
</template>
<script>
  import  axios from  'axios';
  export default {
    data() {
      return {
        organizationForm:{
          keyWords:'',
          department:''
        },
        keyWords:'',
        //部门列表
        departmentTableData:[{
          order:""
        }],
        clientTableData:[{
          order:'',
          userName:'',
          userPhone: '',
          userArea: '',
          userProcessAddress: '',
        }]
      }
    },
    methods:{
      //获取部门列表
      getDepartmentList(){
        var url = "/api/account/department/tree"
        // 封装form表单
        var data = new FormData();
        var reqData = {}
        for(var key in reqData){
          data.append(key,reqData[key])
        }
        // 开始请求
        axios.post(url,data,{
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        })
          .then(function (response) {
            console.log(response);
          })
          .catch(function (response) {
            console.log(response);
          });
      }
    },
    beforeRouteEnter: function (to,from,next) {
      next(vm => {
        vm.getDepartmentList();
      });
    },
  }
</script>

<style scoped>
  .ClientBox{
    padding: 100px 20px 10px 250px;
  }
  .ClientBg{
    background-color: white;
    box-shadow: 0 0 6px #e7e7e7;
  }
  .ClientContent{
    padding: 20px;
  }
  .ClientTitle{
    font-size: 12px;
    color: #ffa44c;
  }
  .icon{
    color: #777;
    margin-left: 5px;
    font-size: 15px;
  }
  .priceTable{
    margin-top: 30px;
  }
  .addNewItem{
    text-align: right;
  }
  #keyWords{
    border-radius: 20px;
  }
  .keyWordsContent{
    position: relative;
  }
  .searchIcon{
    position: absolute;
    left: 158px;
    top: 7px;
    font-size: 20px;
    color: gray;
  }
  .searchWorker{
    position: absolute;
    left: 350px;
    top: 10px;
    font-size: 20px;
    color: gray;
  }
  .setPosition{
    margin-top: 20px;
  }
  .priceTable{
    text-align: center;
  }
</style>
